<template>
  <div class="koiooplp">
       <van-loading size="24px" vertical class="jijiaaiaai" v-if="tobijidata=='' ">加载中...</van-loading>
      <div class="detailto" v-if="tobijidata!='' ">
         <div class="detatop">
             <div class="ping">
                  <div :class="['detailhead', { xian: topda==true}]">
                        <div class="left">
                             <span class="iconfont icon-xiangzuo"  @click="$router.push('/Home')"></span>
                             <span class="popui" v-show="tophes" >
                                 <span class="iconfont ti"  >
                                    <div  v-if="tobijidata">
                                        <img v-lazy="tobijidata.author.p" alt="">
                                    </div>
                                </span>
                                <span class="iconfont ty" @click="guangzhuto" v-if="tobijidata">
                                    <div v-show="tobijidata.guangzu==false">
                                        关注
                                    </div>
                                    <div class="guan" v-show="tobijidata.guangzu==true">
                                        已关注
                                    </div>
                                </span>
                             </span>
                        </div>
                        <div class="right">
                            <span class="iconfont icon-pengyouquan"></span>
                            <span class="iconfont icon-weixin"></span>
                            <span class="iconfont icon-dian1" ></span>
                        </div>
                  </div>
             </div>
             <div class="mv" v-if="tobijidata">
                <img v-lazy="tobijidata.share_info.image" alt="">
             </div>
         </div>
         <!-- 题 -->
         <div class="detamin">
            <div class="description" v-show ="tobijidata.title!=''">
                <h3 v-if="tobijidata">
                    <span>{{tobijidata.title}}</span>
                </h3>
                <div class="pito">
                    <span>精品</span>
                    <span class="iconfont icon-dian"></span>
                    <span>独家</span>
                    <span class="iconfont icon-dian"></span>
                    <span>浏览 132</span>
                    <span class="iconfont icon-dian"></span>
                    <span>收藏 123</span>
                </div>
            </div>
            <!-- 文 -->
            <div class="text" v-if="tobijidata">
                <div class="item" v-for="(item) in tobijidata.contents" :key="item.id">
                    <p>
                       {{item.c}}
                    </p>
                </div>
                <!-- <div class="item">
                    <p>
                        每个人心中大概都有一道可乐鸡翅。这道菜简单快手，特别适合厨艺新手但可乐绝不是随便倒的，
                        放多了甜腻，过少又不够入味，把握用才能咸甜适中，既保留可乐的香气，又让鸡翅光泽诱人。
                    </p>
                </div> -->
            </div>
             
            <div class="xianggaunbiji">
                <hr style="width:98.7%;height: 0px;border: 0.5px solid #F0F0F0;">
                <div class="hmainindex" >
                    
                    <div class="li" v-for="(item) in thsadlist" :key="item.id" >
                        <div class="imgsto">
                          <img  v-lazy="item.image_u" alt="">
                        </div>
                        <div class="textbear">
                            <div class="h3to">
                               {{item.title}}
                            </div>
                            <div class="textluo">
                                <div class="left" v-if="item.author">
                                  <div class="img" >
                                    <img :src="item.author.p" alt="">
                                  </div>
                                  <span>{{item.author.n}}</span>
                                </div>
                                <!-- <div class="right">
                                  <span class="iconfont icon-modify"></span>
                                   参与
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
         <div class="remindertos">
             <div class="bontss">
                 <div class="input">
                    <div class="pu">说点什么</div>
                 </div>
                 <div class="review">
                     <span class="iconfont icon-pinglun-"></span>
                     <span>评论</span>
                 </div>
                 <div class="enshrine">
                      <span class="iconfont icon-shoucang1 ry" @click="gosoucahng" v-show="tobijidata.shucahngto == true"></span>
                    <span class="iconfont icon-shoucang1" @click="gosoucahng" v-show="tobijidata.shucahngto == false"></span>
                    <!-- <span class="iconfont icon-shoucang1"></span> -->
                    <span>收藏</span>                                  
                 </div>
                 <div class="learn">
                    <span class="iconfont icon-xiangji"></span>
                    <span>传学做</span>     
                 </div>
             </div>
         </div>
      </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { ShareSheet,} from 'vant';
import { Toast } from 'vant';
import { Loading } from 'vant';
Vue.use(Loading);
Vue.use(ShareSheet);
import { Lazyload } from 'vant';
import {getbijixing,getbijiguan } from '../../api/biji';
Vue.use(Lazyload);
// import {getmendetails} from "../../api/menudetails";
export default {
   data(){
       return{
            topda:true,//定补背景变白
            tophes:true,//顶部显示头像
            showShare: false,
            showPopover:false,
            getgolistdd:null,
            thisgtoid:3145896,
            options: [
                { name: '微博', icon: 'weibo' },
                { name: '复制链接', icon: 'link',},
                { name: '分享海报', icon: 'poster' },
                { name: '二维码', icon: 'qrcode' },
              
            ],
            lisfpii:[
                {
                    name:"大大怪",
                    img:"https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto",
                    textpu:"每个人心中大概都有一道可乐鸡翅。这道菜简单快手，特别适合厨艺新手但可乐绝不是随便倒的，放多了甜腻，过少又不够入味，把握用才能咸甜适中，既保留可乐的香气，又让鸡翅光泽诱人。",
                    id:45,
                    anzanto:false
                },
            ],
            bjdata:null,//笔记
            tobijidata:'',//笔记
            thsad:null,//相关
            thsadlist:[],//相关数组
            recipeid:null
       }
   },
   methods:{
    
       
        bofangxiangji(){
            Toast("请启用相机");
        },
        fengxing(){
            this.showShare=true
        },
        onSelect(option){
            Toast(option.name);
            this.showShare = false;
            console.log(this.showShare)
        },
        overlay(){
            this.showShare = false;
        },
        cancel(){
            this.showShare = false;
        },
        //菜谱详情
        getmendeta(){
            console.log()
            let recipeid = this.recipeid;
            getbijixing(recipeid).then(data=>{
                console.log("笔记详情",data)
                this.bjdata=data;
                let lsitsadd = new Set([this.bjdata.result.note])
                  for (let e of lsitsadd) {
                    //   console.log(data);
                       let{id,title,author,contents,share_info} = e ; 
                       let data={
                           id:id,
                           title:title,
                           author:author,
                           contents:contents,
                           share_info:share_info,
                           guangzu:false,
                           shucahngto:false
                       }
                    //    console.log(data);
                    
                    let bijiIdsoucanglsit = JSON.parse(sessionStorage.getItem('bijiIdsoucanglsit'));//取数据
                    if(bijiIdsoucanglsit){
                        let itpo= bijiIdsoucanglsit.findIndex(item=>item.id==data.id);
                        if(itpo!=-1){
                           data.shucahngto=true;
                       }
                    }
                    let bijiIdguangzulsit = JSON.parse(sessionStorage.getItem('bijiIdguangzulsit'));//取数据
                    if(bijiIdguangzulsit){
                        let itpos= bijiIdguangzulsit.findIndex(item=>item.id==data.id);
                        if(itpos!=-1){
                           data.guangzu=true;
                       }
                    }
                     this.tobijidata=data;
                     
                  }
            })
        },
        //相关笔记
        getxainggaun(){
            getbijiguan({recipeid:this.recipeid}).then(data=>{
                // console.log("相关笔记",data)
                this.thsad=data;
                this.thsad.result.list.forEach(ele => {
                     let lsitsadd = new Set([ele.note])
                        for (let e of lsitsadd) {
                            //   console.log(data);
                            let{id,title,author,video_cover,image_u,straight_text} = e ; 
                            let data={
                                id:id,
                                title:title,
                                video_cover:video_cover,
                                image_u:image_u,
                                straight_text:straight_text,
                                author:author
                            }
                            // console.log("相关",data);
                            this.thsadlist.push(data);
                        }
                    
                });
            })
        },
        //获取id
        getbijiid(){
            console.log("传",this.$route.params.data);
          if(this.$route.params.data){
             this.recipeid=this.$route.params.data;
          }else{
              let bijiId = JSON.parse(sessionStorage.getItem('bijiId'));//取数据
              this.recipeid=bijiId;
          }
          this.getmendeta();
          this.getxainggaun();
        },
        //关注
        guangzhuto(){
            this.tobijidata.guangzu=!this.tobijidata.guangzu;
             let data =this.tobijidata
             let bijiIdsoucanglsit = JSON.parse(sessionStorage.getItem('bijiIdguangzulsit'));//取数据
             if(bijiIdsoucanglsit){
                let itpo= bijiIdsoucanglsit.findIndex(item=>item.id==data.id);
                if(itpo==-1){
                    bijiIdsoucanglsit.push(data);
                    window.sessionStorage.setItem('bijiIdguangzulsit',JSON.stringify(bijiIdsoucanglsit));//存数据
                }
                
                //  console.lo(data)
             }else{
                 let bijiIdsoucanglsitss = [];
                  bijiIdsoucanglsitss.push(data);
                  window.sessionStorage.setItem('bijiIdguangzulsit',JSON.stringify(bijiIdsoucanglsitss));//存数据
             }
        },
        //搜藏
        gosoucahng(){
            console.log(this.tobijidata.shucahngto)
            
             this.tobijidata.shucahngto=!this.tobijidata.shucahngto;
            
             if(this.tobijidata.shucahngto==true){
                 let data =this.tobijidata
                let bijiIdsoucanglsit = JSON.parse(sessionStorage.getItem('bijiIdsoucanglsit'));//取数据
                if(bijiIdsoucanglsit){
                    let itpo= bijiIdsoucanglsit.findIndex(item=>item.id==data.id);
                    if(itpo==-1){
                        bijiIdsoucanglsit.push(data);
                        window.sessionStorage.setItem('bijiIdsoucanglsit',JSON.stringify(bijiIdsoucanglsit));//存数据
                    }
                    
                    //  console.lo(data)
                }else{
                    let bijiIdsoucanglsitss = [];
                    bijiIdsoucanglsitss.push(data);
                    window.sessionStorage.setItem('bijiIdsoucanglsit',JSON.stringify(bijiIdsoucanglsitss));//存数据
                }
             }
             if(this.tobijidata.shucahngto==false){
                let data =this.tobijidata
                let bijiIdsoucanglsit = JSON.parse(sessionStorage.getItem('bijiIdsoucanglsit'));//取数据
                if(bijiIdsoucanglsit){
                    let itpodf= bijiIdsoucanglsit.findIndex(item=>item.id==data.id);
                    if(itpodf!=-1){
                        bijiIdsoucanglsit.splice(itpodf,1)
                        window.sessionStorage.setItem('bijiIdsoucanglsit',JSON.stringify(bijiIdsoucanglsit));//存数据
                    }
                    
                    //  console.lo(data)
                }
             }
        }

    },
    created(){
        this.getbijiid();
        
    },
    mounted(){
        // this.getwindows();
    },
    destroyed(){
        // window.removeEventListener('scroll');   //  离开页面清除（移除）滚轮滚动事件
    },
   
}
</script>

<style lang="less">
.koiooplp{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #ffff;
        z-index: 999;
}
       .jijiaaiaai{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -24px;
            margin-top: -24px;
            z-index: 99;
            
        }
    .detailto{
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #ffff;
        z-index: 30;
        padding-bottom: 60px;
        overflow: hidden;
        .detatop{
            width: 100%;
            max-height: 375px;
            // height: 300px;
            // max-height:360px;
            background-image: url('https://img2.baidu.com/it/u=874978404,1243508837&fm=26&fmt=auto');
            background-size: 100%  100%;
            background-position: center;
            background-repeat: no-repeat;
            .mv{
                width: 100%;
                // margin-top: 40px;
                max-height:260px;
                // position: absolute;
                overflow: hidden;
                overflow: hidden;
                left: 0;
                z-index: 10;
                video{
                    width: 100%;
                    height: 100%;
                }
                img{
                    width: 100%;
                    margin:auto;
                }
            }
            .ping{
                width: 100%;
                height: 50px;
                z-index: 20;
            }
            .detailhead{
                width: 100%;
                height: 50px;
                padding: 10px;
                position:fixed;
                box-sizing: border-box;
                display: flex;
                color:#fffeff;
                z-index:30 ;
                justify-content: space-between;
                &.xian{
                    background-color: #ffff;
                    color: #000000;
                    border-bottom: 1px solid rgb(243, 245, 252);
                }
                .left{
                    width: 40%;
                    height: 100%;
                    text-align: center;
                    line-height: 30px;
                    display: flex;
                    justify-content: space-between;
                    span{
                        // flex: 1;
                        height: 100%;
                        display: block;
                        font-size: 24px;
                        &.icon-xiangzuo{
                            text-align: left;
                        }
                        &.popui{
                            display: flex;
                            justify-content:space-between;
                            width: 65%;
                        }
                        &.ti{
                            div{
                                img{
                                    width: 27px;
                                    height: 27px;
                                    border-radius: 50%;
                                }
                            }
                        }
                        &.ty{
                           div{
                               width: 50px;
                               height: 27px;
                               text-align: center;
                               line-height: 27px;
                               border-radius: 20px;
                               background-color: #ffc536;
                               font-size: 10px;
                               &.guan{
                                    background-color: #92918d;
                                    color: #f5f5f5;
                                }
                           }
                            
                        }
                    }
                }
                .right{
                    width: 40%;
                    height: 100%;
                    display: flex;
                    justify-content:space-between;
                    span{
                        flex:1;
                        height: 100%;
                        display: block;
                        text-align: center;
                        line-height: 30px;
                        font-size: 24px;
                        // &.icon-dian1{
                        //     // .van-share-sheet__options{
                        //     //     justify-content: center;
                        //     // }
                        //     // .van-share-sheet__name{
                        //     //     font-size: 12px;
                        //     // }
                        //     // .van-share-sheet__cancel{
                        //     //     color: #000000;
                        //     // }
                        // }
                         
                    }
                
                }
            }
        }
        .detamin{
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            .description{
                width: 100%;
                // height: 50px;
                h3{
                    width: 100%;
                    height: 25px;
                    font-size: 22px;
                    line-height: 25px;
                    overflow: hidden;
                }
                .pito{
                    width: 100%;
                    height: 20px;
                    font-size: 12px;
                    color:#727272;
                    font-weight: 600;
                    line-height: 16px;
                    span{
                        &.iconfont{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
        .text{
            width: 100%;
            margin-top: 10px;
            .item{
                margin-top: 15px;
                width: 100%;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                overflow: hidden;
                p{
                        font-size: 14px;
                        line-height: 20px;
                        color: #333;
                        word-wrap: break-word;
                }
            }
        }
        .xianggaunbiji{
            margin-top: 10px;
            .hmainindex{
            width: 100%;
            overflow: hidden;
            max-height: 1600px;
            margin-top: 20px;
            // padding: 10px;
            background-color: #fafafa;
            box-sizing: border-box;
            flex-direction: column;
            display: flex;
            // justify-content: space-between;
            // justify-content: space-around;
            flex-wrap: wrap;
            // align-items: flex-start;
           .li{
             width: 47%;
             height:auto;
             margin: 5px;
            //  min-height:240px;
            //  max-height:320px;
             margin-top: 6px;
             background-color: #ffffff;
             border-radius: 6px;
             .imgsto{
                width: 100%;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
               img{
                 border-top-left-radius: 6px;
                 border-top-right-radius: 6px;
                 width: 100%;
               }
             }
             .textbear{
               width: 100%;
              //  height: 85px;
               
               padding:10px ;
               box-sizing: border-box;
               .h3to{
                 width: 100%;
                 max-height: 40px;
                 overflow: hidden;
                 font-size: 14px;
                //  font-weight: 600;
                 line-height: 20px;
               }
               .textluo{
                 width: 100%;
                 
                 margin-top: 5px;
                 height: 23px;
                 display: flex;
                 line-height: 23px;
                 justify-content: space-between;
                 color: #cbcbcb;
                 .left{
                   width: 100%;
                   font-size: 10px;
                   display: flex;
                   overflow: hidden;
                   .img{
                     width: 20px;
                     height: 20px;
                     display: flex;
                     align-items: center;
                     img{
                       width: 15px;
                       height: 15px;
                       border-radius: 50%;
                       margin: auto;
                     }
                   }
                 }
                 
               }
             }
           }
          }
        }
        .remindertos{
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #ffff;
            height: 60px;
            padding: 10px;
            box-sizing: border-box;
           
            box-shadow:0 0 2px rgb(223, 222, 222);
            .bontss{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                .input{
                    width: 30%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .pu{
                        width: 100%;
                        height: 30px;
                        text-align: left;
                        box-sizing: border-box;
                        padding-left: 10px;
                        line-height: 32px;
                        border-radius: 20px;
                        background-color: #f5f5f5;
                        font-size: 14px;
                        font-weight: 600;
                        color:#a9a9a9;
                    }
                }
                .review{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                        font-weight: 550;
                        color:#474747;
                        &.iconfont{
                            font-size: 20px;
                            margin-left: 2px;
                        }
                    }
                }
                .enshrine{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                        font-weight: 550;
                        color:#474747;
                        &.iconfont{
                            font-size: 20px;
                            margin-left: 2px;
                              &.ry{
                                color: red;
                            }
                        }
                    }
                }
                .learn{
                    width: 20%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    span{
                        font-size: 14px;
                        font-weight: 550;
                        color:#474747;
                        &.iconfont{
                            font-size: 20px;
                            margin-left: 2px;
                          
                        }
                        
                    }
                }
            }
        }
       
    }
    
</style>